#image-view-container {
    --borderColor: #03a9f3;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
}
#image-view-slick-box {
    height: 100%;
}
#image-view-slick-box-bk {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    filter: brightness(0.5) blur(10px);
}
#image-view-slick-list {
    width: var(--boxW, 10000px);
    height: 100%;
    transform: translateX(0px);
    user-select:none;
}
.image-view-slick-item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: var(--winW, 1920px);
}
.image-view-slick-item-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-view-slick-img {
    z-index: -1;
    width: 90%;
    height: 90%;
    object-fit: contain;
    opacity: 0.5;
    transform: rotate(0deg) rotateY(0deg);
    transition: all 0.4s ease;
}
#image-view-index {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: var(--iconSize);
    text-align: center;
    color: wheat;
    overflow-wrap: break-word;
    text-shadow: 0px 5px 5px rgb(255 0 0 / 50%);
}
#image-view-btn-left {
    position: absolute;
    left: 5px;
    bottom: 50%;
    transform: translateY(50%);
    background-image: url("${PROXY_URL}/__icon__/prev.svg");
}
#image-view-btn-left:hover {
    background-image: url("${PROXY_URL}/__icon__/prev_h.svg");
}
#image-view-btn-left:active {
    background-image: url("${PROXY_URL}/__icon__/prev_a.svg");
}
#image-view-btn-right {
    position: absolute;
    right: 5px;
    bottom: 50%;
    transform: translateY(50%);
    background-image: url("${PROXY_URL}/__icon__/next.svg");
}
#image-view-btn-right:hover {
    background-image: url("${PROXY_URL}/__icon__/next_h.svg");
}
#image-view-btn-right:active {
    background-image: url("${PROXY_URL}/__icon__/next_a.svg");
}
#image-view-toolbar {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 5px;
    background: linear-gradient(to left, var(--borderColor), var(--borderColor)) left top no-repeat, linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left top no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) right top no-repeat, linear-gradient(to bottom, var(--borderColor), var(--borderColor)) right top no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) left bottom no-repeat, linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left bottom no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat, linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat;
    background-size: 10px 2px, 2px 10px;
    transition: all .4s ease;
    border: 1px solid transparent;
}
#image-view-btn-mirror {
    background-image: url("${PROXY_URL}/__icon__/mirror.svg");
}
#image-view-btn-mirror:hover {
    background-image: url("${PROXY_URL}/__icon__/mirror_h.svg");
}
#image-view-btn-mirror:active {
    background-image: url("${PROXY_URL}/__icon__/mirror_a.svg");
}
#image-view-btn-rotL {
    background-image: url("${PROXY_URL}/__icon__/rotL.svg");
}
#image-view-btn-rotL:hover {
    background-image: url("${PROXY_URL}/__icon__/rotL_h.svg");
}
#image-view-btn-rotL:active {
    background-image: url("${PROXY_URL}/__icon__/rotL_a.svg");
}
#image-view-btn-rotR {
    background-image: url("${PROXY_URL}/__icon__/rotR.svg");
}
#image-view-btn-rotR:hover {
    background-image: url("${PROXY_URL}/__icon__/rotR_h.svg");
}
#image-view-btn-rotR:active {
    background-image: url("${PROXY_URL}/__icon__/rotR_a.svg");
}
#image-view-btn-fullscreen {
    background-image: url("${PROXY_URL}/__icon__/fullscreen.svg");
}
#image-view-btn-fullscreen:hover {
    background-image: url("${PROXY_URL}/__icon__/fullscreen_h.svg");
}
#image-view-btn-fullscreen:active {
    background-image: url("${PROXY_URL}/__icon__/fullscreen_a.svg");
}
#image-view-btn-play {
    background-image: url("${PROXY_URL}/__icon__/play.svg");
}
#image-view-btn-play:hover {
    background-image: url("${PROXY_URL}/__icon__/play_h.svg");
}
#image-view-btn-play:active {
    background-image: url("${PROXY_URL}/__icon__/play_a.svg");
}
#image-view-btn-stop {
    display: none;
    background-image: url("${PROXY_URL}/__icon__/stop.svg");
}
#image-view-btn-stop:hover {
    background-image: url("${PROXY_URL}/__icon__/stop_h.svg");
}
#image-view-btn-stop:active {
    background-image: url("${PROXY_URL}/__icon__/stop_a.svg");
}
#image-view-btn-share {
    background-image: url("${PROXY_URL}/__icon__/share.svg");
}
#image-view-btn-share:hover {
    background-image: url("${PROXY_URL}/__icon__/share_h.svg");
}
#image-view-btn-share:active {
    background-image: url("${PROXY_URL}/__icon__/share_a.svg");
}
#image-view-btn-close {
    background-image: url("${PROXY_URL}/__icon__/close.svg");
}
#image-view-btn-close:hover {
    background-image: url("${PROXY_URL}/__icon__/close_h.svg");
}
#image-view-btn-close:active {
    background-image: url("${PROXY_URL}/__icon__/close_a.svg");
}
